<template>
	<view class="contacts-page">
		<!-- 搜索栏 -->
		<view class="search-bar">
			<view class="search-icon">
				<image src="/static/fang_da_jing.svg" mode="aspectFit"></image>
			</view>
			<view class="add-icon">
				<image src="/static/jia_hao.svg" mode="aspectFit"></image>
			</view>
		</view>
		
		<!-- 功能列表 -->
		<view class="function-list">
			<view class="function-item" v-for="func in functionList" :key="func.id">
				<view class="function-avatar">
					<image :src="func.avatar" mode="aspectFill" v-if="func.avatar"></image>
				</view>
				<text class="function-name">{{ func.name }}</text>
				<view class="function-arrow">〉</view>
			</view>
		</view>
		
		<!-- 我的企业及企业联系人 -->
		<view class="section-header">我的企业及企业联系人</view>
		<view class="enterprise-list">
			<view class="enterprise-item">
				<view class="enterprise-avatar">
					<image src="/static/contacts/qi_ye_wei_xin.png" mode="aspectFill" @error="onImageError"></image>
				</view>
				<text class="enterprise-name">企业微信联系人</text>
				<view class="enterprise-arrow">〉</view>
			</view>
		</view>
		
		<!-- 星标朋友 -->
		<view class="section-header">星标朋友</view>
		<view class="star-friends">
			<view class="friend-item" v-for="friend in starFriends" :key="friend.id">
				<view class="friend-avatar">
					<image :src="friend.avatar" mode="aspectFill"></image>
				</view>
				<text class="friend-name">{{ friend.name }}</text>
				<view class="friend-arrow">〉</view>
			</view>
		</view>
		
		<!-- 字母索引区域 -->
		<view class="alphabet-section">
			<view class="alphabet-header">W</view>
			<view class="alphabet-list">
				<view class="alphabet-item">
					<view class="alphabet-avatar">
						<image src="/static/avatar/robot.jpg" mode="aspectFill"></image>
					</view>
					<text class="alphabet-name">我们&51</text>
				</view>
			</view>
		</view>
		
		<!-- 右侧字母导航 -->
		<view class="alphabet-nav">
			<text class="nav-item" v-for="letter in alphabetList" :key="letter">{{ letter }}</text>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'

// 功能列表
const functionList = ref([
	{
		id: 1,
		name: '新的朋友',
		avatar: '/static/contacts/newFriend.png'
	},
	{
		id: 2,
		name: '仅聊天的朋友',
		avatar: '/static/contacts/jin_liao_tian_de_peng_you.png'
	},
	{
		id: 3,
		name: '群聊',
		avatar: '/static/contacts/qun_liao.png'
	},
	{
		id: 4,
		name: '标签',
		avatar: '/static/contacts/biao_qian.png'
	},
	{
		id: 5,
		name: '公众号',
		avatar: '/static/contacts/gong_zhong_hao.png'
	},
	{
		id: 6,
		name: '服务号',
		avatar: '/static/contacts/fu_wu_hao.png'
	}
])

// 星标朋友
const starFriends = ref([
	{
		id: 1,
		name: '朋友1',
		avatar: '/static/contacts/touxiang1.png'
	},
	{
		id: 2,
		name: '朋友2',
		avatar: '/static/contacts/touxiang2.png'
	}
])

// 字母列表
const alphabetList = ref([
	'↑', '☆', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 
	'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 
	'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '#'
])

// 图片加载错误处理
const onImageError = (e) => {
	console.log('图片加载失败:', e)
}
</script>

<style scoped>
.contacts-page {
	background-color: #f7f7f7;
	height: 100vh;
}

.search-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 16px;
	background-color: #f7f7f7;
	border-bottom: 1px solid #e5e5e5;
}

.search-icon, .add-icon {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	background-color: rgba(0, 0, 0, 0);
}

.search-icon:active, .add-icon:active {
	background-color: rgba(0, 0, 0, 0.1);
}

.search-icon image, .add-icon image {
	width: 22px;
	height: 22px;
	display: block;
	background-color: transparent;
}

.function-list {
	background-color: #fff;
	margin-bottom: 10px;
}

.function-item {
	display: flex;
	align-items: center;
	padding: 12px 16px;
	border-bottom: 1px solid #f0f0f0;
}

.function-item:last-child {
	border-bottom: none;
}

.function-icon {
	width: 40px;
	height: 40px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 12px;
}

.function-icon .icon {
	font-size: 20px;
	color: #fff;
}

.function-avatar {
	width: 40px;
	height: 40px;
	border-radius: 8px;
	overflow: hidden;
	margin-right: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #f5f5f5;
	border: 1px solid #e0e0e0;
}

.function-avatar image {
	width: 100%;
	height: 100%;
	display: block;
}

.function-name {
	flex: 1;
	font-size: 16px;
	color: #333;
}

.function-arrow {
	color: #ccc;
	font-size: 14px;
}

.section-header {
	background-color: #f7f7f7;
	padding: 8px 16px;
	font-size: 14px;
	color: #666;
}

.enterprise-list {
	background-color: #fff;
	margin-bottom: 10px;
}

.enterprise-item {
	display: flex;
	align-items: center;
	padding: 12px 16px;
}

.enterprise-icon {
	width: 40px;
	height: 40px;
	background-color: #2196f3;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 12px;
}

.enterprise-icon .icon {
	font-size: 20px;
	color: #fff;
}

.enterprise-avatar {
	width: 40px;
	height: 40px;
	border-radius: 8px;
	overflow: hidden;
	margin-right: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	background-color: #f5f5f5;
	border: 1px solid #e0e0e0;
}

.enterprise-avatar image {
	width: 100%;
	height: 100%;
	display: block;
	background-color: #e5e5e5;
}

.enterprise-name {
	flex: 1;
	font-size: 16px;
	color: #333;
}

.enterprise-arrow {
	color: #ccc;
	font-size: 14px;
}

.star-friends {
	background-color: #fff;
	margin-bottom: 10px;
}

.friend-item {
	display: flex;
	align-items: center;
	padding: 12px 16px;
	border-bottom: 1px solid #f0f0f0;
}

.friend-item:last-child {
	border-bottom: none;
}

.friend-avatar {
	width: 40px;
	height: 40px;
	border-radius: 6px;
	overflow: hidden;
	margin-right: 12px;
}

.friend-avatar image {
	width: 100%;
	height: 100%;
	background-color: #e5e5e5;
}

.friend-name {
	flex: 1;
	font-size: 16px;
	color: #333;
}

.friend-arrow {
	color: #ccc;
	font-size: 14px;
}

.alphabet-section {
	background-color: #fff;
}

.alphabet-header {
	background-color: #f7f7f7;
	padding: 8px 16px;
	font-size: 14px;
	color: #666;
	font-weight: bold;
}

.alphabet-list {
	padding: 0 16px;
}

.alphabet-item {
	display: flex;
	align-items: center;
	padding: 12px 0;
	border-bottom: 1px solid #f0f0f0;
}

.alphabet-avatar {
	width: 40px;
	height: 40px;
	border-radius: 6px;
	overflow: hidden;
	margin-right: 12px;
}

.alphabet-avatar image {
	width: 100%;
	height: 100%;
	background-color: #e5e5e5;
}

.alphabet-name {
	font-size: 16px;
	color: #333;
}

.alphabet-nav {
	position: fixed;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
}

.nav-item {
	font-size: 12px;
	color: #666;
	padding: 2px 4px;
	text-align: center;
	min-width: 20px;
}
</style>